<template>
  <div class="container">
    <Navbar title="密码修改" />

    <div class="container-body">
        <div class="box-content flex-start">
          <span class="password-left">当前帐号</span>
          <span>{{ userInfo.username }}</span>
        </div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="原密码" prop="password">
            <el-input v-model.number="ruleForm.password" type="password" autocomplete="off" 
              placeholder="请输入原密码"/>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input
              v-model="ruleForm.newPassword"
              placeholder="新密码包含数字和字母不少于六位"
              type="password"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              v-model="ruleForm.checkPass"
              placeholder="再次填写密码"
              type="password"
              autocomplete="off"
            />
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
            <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
          </el-form-item> -->
        </el-form>
        <!-- <div class="box-content">
          <span class="password-left">原始密码：</span>
          <input class="input-style" v-model="text" type="text" placeholder="请输入原密码" />
        </div>
        <div class="box-content">
          <span class="password-left">新密码：</span>
          <el-input
            v-model="newPassword"
            class="input-style"
            type="newPassword"
            maxlength="20"
            minlength="2"
            onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"
            placeholder="新密码包含数字和字母不少于六位"
          />
        </div>
        <div class="box-content">
          <span class="password-left">确认密码：</span>
          <input class="input-style" type="text" placeholder="再次填写密码" />
        </div> -->
    </div>
    <div class="confirm-btn">
      <van-button
        type="primary"
        :loading="loading"
        class="sum-btn"
        @click="confirmBtn"
        ><span style="color: #ffffff; font-weight: 500; font-family: Source Han Sans CN">
          提交
        </span></van-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { ref, reactive } from 'vue'
import { storeToRefs } from 'pinia'
import { FormInstance, FormRules } from 'element-plus'
import { useUserStore } from '@/store'
import QuotaServe from '@/api/quota'
import { showToast } from 'vant'
import CryptoJS from 'crypto-js'
const ruleFormRef = ref(null)

const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入原密码'))
  }
  callback()
}

const validatePass = (rule: any, value: any, callback: any) => {
  const regex = /^(?=.*[A-Za-z])(?=.*[0-9]).{6,}$/ // 包含字母和数字，且不少于6位
  const valid = regex.test(value)
  if (!valid) {
    return callback(new Error('包含数字和字母不少于6位'))
  }
  callback()
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '' || value === null || value === undefined) {
    callback(new Error('请再次输入密码'))
  } else if (value !== ruleForm.newPassword) {
    callback(new Error('两次密码输入不一致'))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  newPassword: '',
  checkPass: '',
  password: ''
})

const rules = reactive<FormRules>({
  newPassword: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  password: [{ validator: checkAge, trigger: 'blur' }]
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
// 取出用户信息
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const newPassword = ref('')
const router = useRouter()
const text = ref('')
function goBack(): void {
  router.go(-1)
}
const loading = ref(false)

const passwordCryptoJS = (pwd: string) => {
  const key = CryptoJS.enc.Utf8.parse('AD42F6697B035B75')
  const srcs = CryptoJS.enc.Utf8.parse(pwd)
  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  })
  return encrypted.toString()
}
const confirmBtn = () => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (!valid) return
    loading.value = true
      QuotaServe.changePassword({
        password: passwordCryptoJS(ruleForm.password),
        newPassword: passwordCryptoJS(ruleForm.newPassword)
      }).then(resp => {
        loading.value = false
        if (resp.msg === 'success') {
          showToast('修改成功')
          goBack()
        }
      }).finally(() => {
        loading.value = false
      })
  })
}
</script>

<style lang="less" scoped>
.sum-btn {
  width: 320px;
  height: 44px;
  border-radius: 25px;
  background: #3A75C5;
  box-shadow: 0px 2px 5px 0px #00000019;
  font-size: 16px;
  font-weight: 900;
  border-color: #3A75C5;
}
.container {
  position: relative;
  height: 811px;
}
.title {
  display: flex;
  margin-top: 3vh;
  position: relative;
  width: 100%;
}
.back-btn {
  width: 50px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  margin-right: 10px;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 10;
}
.container-body {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  margin-top: -1px;
  padding: 0 12px;
  color: #212121;
  font-size: 15px;
  :deep(.el-form-item){
    width: 100%;
    height: 52px;
    margin: 0;
    align-items: center;
    border-top: 0.32px solid #e2e2e2;
    .el-input{
      line-height: 20px;
      height: 20px;
    }
    .el-input__wrapper {
      box-shadow: none;
      padding: 0;
    }
  }
}
.box-content {
  font-size: 15px;
  color: #444444;
  height: 52px;
}
.password-left {
  box-sizing: border-box;
}
.input-style {
  border: 1px solid transparent;
  width: 240px;
  font-size: 15px;
}
.confirm-btn {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
:deep(.el-form-item__label) ,.password-left{
  width: 105px !important;
  font-size: 15px !important;
  padding-right: 30px;
  text-align: right;
}
:deep(.el-form-item__content) {
  border: 1px solid transparent !important;
}
:deep([data-v-15039eee] .el-form-item__label) {
  font-size: 15px !important;
}
:deep(.el-input__inner) {
  font-size: 15px !important;
}
</style>
